<template>
  <el-container>
    <el-header style="height: 100%">
      <div class="pd-10">
        <el-row :gutter="10">
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>总验证码条数</p>
                <p>{{ VerificationCodeCount }}条</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>昨日发送验证码条数</p>
                <p>{{ VerificationYesterdayRegister }}条</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>短信验证码总数</p>
                <p>{{ SMSVerificationCodeCount }}条</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>邮箱验证码总数</p>
                <p>{{ EmailVerificationCodeCount }}条</p>
              </div>
            </a>
          </el-col>
        </el-row>
      </div>

      <div class="pd-10">
        <el-input style="width: 200px" suffix-icon="el-icon-edit" placeholder="请输入接收号码"
                  v-model="vfReception"></el-input>
        <el-input class="ml-5" style="width: 200px" suffix-icon="el-icon-edit" placeholder="请输入业务类型"
                  v-model="vfOperation"></el-input>
        <el-select class="ml-5" filterable clearable v-model="vfType" placeholder="验证码类型">
          <el-option label="手机" value="0"></el-option>
          <el-option label="邮件" value="1"></el-option>
        </el-select>
        <el-button class="ml-5" icon="el-icon-search" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" icon="el-icon-edit" @click="reset">重置</el-button>
      </div>
    </el-header>
    <el-main>
      <div>
        <el-table :data="tableData" border stripe v-loading="loading" heigth="580">
          <el-table-column prop="verificationCodeId" label="编号" width="80">
          </el-table-column>
          <el-table-column prop="vfReception" label="接收号码" width="140">
          </el-table-column>
          <el-table-column prop="createDatetime" label="创建时间" width="200">
          </el-table-column>
          <el-table-column prop="vfAging" label="时效" width="140">
          </el-table-column>
          <el-table-column prop="vfType" label="验证码类型" width="140">
            <template slot-scope="scope">
              <span v-if="scope.row.vfType === 0">手机</span>
              <span v-if="scope.row.vfType === 1">邮件</span>
            </template>
          </el-table-column>
          <el-table-column prop="vfOperation" label="业务名称" width="140">
          </el-table-column>
          <el-table-column prop="vfCode" label="验证码">
          </el-table-column>
          <!--                <el-table-column-->
          <!--                        fixed="right"-->
          <!--                        label="操作"-->
          <!--                        width="100">-->
          <!--                    <template slot-scope="scope">-->
          <!--                        <el-button @click="getVerificationCodeDetail(scope.row.verificationCodeId)" type="text" size="small">详情</el-button>-->
          <!--                    </template>-->
          <!--                </el-table-column>-->
        </el-table>
      </div>
      <el-dialog title="验证码详情" :visible.sync="DetailsDialogFormVisible">
        <el-form :model="form">
          <el-form-item label="验证码编号" :label-width="formLabelWidth">
            <el-input :disabled="true" placeholder="验证码编号" v-model="form.verificationCodeId"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="接收号码" :label-width="formLabelWidth">
            <el-input :disabled="true" placeholder="接收号码" v-model="form.vfReception" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" :label-width="formLabelWidth">
            <el-input :disabled="true" placeholder="创建时间" v-model="form.createDatetime"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="时效" :label-width="formLabelWidth">
            <el-input :disabled="true" placeholder="时效" v-model="form.vfAging" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="验证码类型" :label-width="formLabelWidth">
            <el-input :disabled="true" placeholder="验证码类型" v-model="form.vfType" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="业务名称" :label-width="formLabelWidth">
            <el-input :disabled="true" placeholder="业务名称" v-model="form.vfOperation" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="验证码" :label-width="formLabelWidth">
            <el-input :disabled="true" placeholder="验证码" v-model="form.vfCode" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-main>
    <el-footer>
      <div class="pd-10">
        <!--          current-page: 当前的页码
                      page-size: 每页的个数
        -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[20 ,40, 80, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name: "VerificationCode",
  data() {
    return {
      loginStatus: true,
      loading: true,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      VerificationCodeCount: 0,
      SMSVerificationCodeCount: 0,
      EmailVerificationCodeCount: 0,
      VerificationYesterdayRegister: 0,
      vfReception: "",
      vfOperation: "",
      vfType: "",
      DetailsDialogFormVisible: false,
      formLabelWidth: '120px',
      VerificationCodeList: [],
      form: {
        verificationCodeId: '',
        vfReception: '',
        createDatetime: '',
        vfAging: '',
        vfType: '',
        vfOperation: '',
        vfCode: ''
      },
    }
  },
  created() {
    this.load()
    this.FindVerificationCodeCount()
    this.FindSMSVerificationCodeCount()
    this.FindEmailVerificationCodeCount()
    this.FindVerificationYesterdayRegister()
  },
  methods: {
    load() {
      this.loading = true
      this.$axios({
        method: "get",
        url: this.$api.FindVerificationCodePage,
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          vfReception: this.vfReception,
          vfOperation: this.vfOperation,
          vfType: this.vfType
        },
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.loading = false
      })
    },
    //修改每页的条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    //修改页码
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    //搜索重置
    reset() {
      this.productCategoryName = ""
      this.productCategoryParentName = ""
      this.load()
    },
    //关闭弹出框
    cancelDialog() {
      this.form = {
        verificationCodeId: '',
        vfReception: '',
        createDatetime: '',
        vfAging: '',
        vfType: '',
        vfOperation: '',
        vfCode: ''
      }
      this.DetailsDialogFormVisible = false
    },
    getVerificationCodeDetail(verificationCodeId) {
      this.$axios({
        url: this.$api.FindVerificationCodeDetail,
        method: 'get',
        params: {
          verificationCodeId: verificationCodeId
        }
      }).then(res => {
        this.form = res.data
        this.DetailsDialogFormVisible = true
      })
    },

    FindVerificationCodeCount() {
      this.$axios({
        url: this.$api.FindVerificationCodeCount,
        method: 'get',
      }).then(res => {
        this.VerificationCodeCount = res.data
      })
    },
    FindSMSVerificationCodeCount() {
      this.$axios({
        url: this.$api.FindSMSVerificationCodeCount,
        method: 'get',
      }).then(res => {
        this.SMSVerificationCodeCount = res.data
      })
    },
    FindEmailVerificationCodeCount() {
      this.$axios({
        url: this.$api.FindEmailVerificationCodeCount,
        method: 'get',
      }).then(res => {
        this.EmailVerificationCodeCount = res.data
      })
    },
    FindVerificationYesterdayRegister() {
      this.$axios({
        url: this.$api.FindVerificationYesterdayRegister,
        method: 'get',
      }).then(res => {
        this.VerificationYesterdayRegister = res.data
      })
    }
  },
}
</script>

<style scoped>

</style>